<template>
  <span>
    <svg
      t="1735989891140"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="5187"
      :style="styleCpd"
    >
      <path
        d="M500.096 702.60736h-23.80288v-23.808h-23.80288v-23.80288h-23.808v-23.80288h-23.80288v-23.808h-23.86944v-23.808h-23.80288v-23.86944h-23.80288v-23.80288h-23.808v-23.80288h-23.808v-23.808h-23.808v-23.80288h-23.80288v-23.808h-23.86944v-23.80288h-23.80288V393.0112h-23.80288v-23.80288h-23.808v-23.808H119.0912v-23.808h-23.80288v-23.80288H71.4752v-23.80288H0v71.41376h23.80288v23.808h23.86944v23.80288h23.80288v23.86944h23.81312v23.80288h23.80288v23.808h23.80288v23.80288h23.808v23.808h23.80288v23.80288h23.80288v23.80288h23.86944v23.86944h23.80288v23.808h23.808v23.808h23.808v23.80288h23.808v23.80288h23.80288v23.808h23.80288v23.80288h23.86944v23.86944h23.80288v23.80288h23.808v23.80288h23.80288v23.808H547.77344v-23.808h23.80288v-23.80288h23.808v-23.80288h23.808v-23.86944h23.80288v-23.80288h23.80288v-23.808h23.80288v-23.80288h23.86944v-23.80288h23.808v-23.808h23.80288v-23.808h23.808v-23.86944h23.80288v-23.80288h23.808v-23.80288h23.80288v-23.808h23.80288v-23.80288h23.86944v-23.808h23.808v-23.80288h23.80288V393.0112h23.808v-23.80288h23.80288v-23.808H1024V273.98656h-71.41376v23.80288h-23.80288v23.80288h-23.808v23.808h-23.86944v23.808h-23.80288v23.80288h-23.80288v23.86944h-23.808v23.80288h-23.80288v23.808h-23.808v23.80288h-23.80288v23.808h-23.808v23.80288h-23.86944v23.80288h-23.80288v23.86944h-23.80288v23.808h-23.80288v23.808h-23.808v23.80288h-23.808v23.80288h-23.86432v23.808h-23.808v23.80288h-23.808z"
        p-id="5188"
      ></path>
    </svg>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { IIconProps } from './type'
const props = withDefaults(defineProps<IIconProps>(), {
  size: 18,
  color: 'rgba(255, 255, 245, 0.86)'
})

// 计算样式
const styleCpd = computed(() => {
  return `fill:${props.color};width:${props.size}px;height:${props.size}px;`
})
</script>

<style scoped>
span {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  cursor: pointer;
}

.icon:hover {
  opacity: 0.5;
}
</style>
